import { defineComponent, onMounted, reactive, ref, toRefs, unref } from 'vue'
import { Card, Button, Table, Space, Row, Col, Input, message, Select, FormItem } from 'ant-design-vue'
import { useDetail } from './use-detail'
import { useColumns } from './use-columns'
import DataDetail from './detail'
import { BusinessPageTypeEnum } from '@/enums/pageTypeEnum'

const Shop = defineComponent({
  name: 'Shop',
  setup() {
    const tableLoading = ref<boolean>(false)
    const tableData = ref<any[]>([])
    const brandOptionData = ref<any[]>([])
    const pageType = ref<BusinessPageTypeEnum>(BusinessPageTypeEnum.TABLE)
    const selectData = reactive({
      code: null as string | null
    })
    const tableTotal = ref<any>({
      currPage: 1,
      totalCount: 0,
      totalPage: 0,
      pageSize: 10
    })
    const tableQuery = reactive({
      name: null as string | null,
      pageNum: 1,
      pageSize: 10
    })
    const { status, getDataList, updateDataStatusById } = useDetail()

    const updateData = (code: string) => {
      pageType.value = BusinessPageTypeEnum.UPDATE
      selectData.code = code
    }

    const detailData = (code: string) => {
      pageType.value = BusinessPageTypeEnum.DETAIL
      selectData.code = code
    }

    const updateStatus = async (code: string, status: any) => {
      await updateDataStatusById(code, status)
      await fetchData()
    }

    const { getColumns, tableColumns } = useColumns(updateData, detailData, updateStatus)

    const onSearch = async () => {
      tableQuery.pageNum = 1
      tableQuery.pageSize = 10
      await fetchData()
    }

    const onConfirmModal = () => {
      onCancelModal()
      onReset()
    }

    const onCancelModal = () => {
      pageType.value = BusinessPageTypeEnum.TABLE
      selectData.code = null
    }

    const handlePageChange = async () => {
      await fetchData()
    }

    async function fetchData() {
      tableLoading.value = true
      try {
        const data = await getDataList(tableQuery)
        const { items, pageInfo } = data as unknown as any
        tableData.value = items
        tableTotal.value = pageInfo
        tableLoading.value = false
      } catch (error) {
        tableLoading.value = false
        console.log(error)
      }
    }

    const onReset = async () => {
      tableQuery.pageNum = 1
      tableQuery.pageSize = 10
      tableQuery.name = null
      await fetchData()
    }

    const addRole = () => {
      pageType.value = BusinessPageTypeEnum.ADD
    }

    onMounted(async () => {
      await fetchData()
    })

    return {
      ...toRefs(status),
      tableLoading,
      tableData,
      tableTotal,
      tableQuery,
      tableColumns,
      pageType,
      selectData,
      brandOptionData,
      onSearch,
      onReset,
      handlePageChange,
      getColumns,
      addRole,
      onConfirmModal,
      onCancelModal
    }
  },

  render() {
    const {
      tableColumns,
      tableLoading,
      tableData,
      tableTotal,
      tableQuery,
      pageType,
      selectData,
      brandOptionData,
      onSearch,
      onReset,
      getColumns,
      handlePageChange,
      addRole,
      onConfirmModal,
      onCancelModal
    } = this
    return (
      <>
        {pageType === BusinessPageTypeEnum.TABLE && (
          <>
            <Card>
              <Row gutter={16} align='middle' type='flex'>
                <Col span={6}>
                  <FormItem label={'门店名称'}>
                    <Input v-model={[tableQuery.name, 'value']} placeholder={'请输入'}></Input>
                  </FormItem>
                </Col>
                <Col span={6}></Col>
                <Col span={6}>
                  <Space>
                    <Button type={'primary'} onClick={onSearch}>
                      查询
                    </Button>
                    <Button onClick={onReset}>重置</Button>
                  </Space>
                </Col>
              </Row>
              <div style={{ marginTop: '16px' }}>
                <Button type={'primary'} onClick={addRole} v-auth={['sys:user:add']}>
                  +新增
                </Button>
              </div>
            </Card>
            <Card style={{ marginTop: '16px' }}>
              <Table
                rowKey='id'
                columns={tableColumns}
                dataSource={unref(tableData)}
                loading={unref(tableLoading)}
                pagination={{
                  current: tableQuery.pageNum,
                  pageSize: tableQuery.pageSize,
                  total: unref(tableTotal.totalCount),
                  showTotal: () => `Total ${unref(tableTotal.totalCount)} items`,
                  showSizeChanger: true,
                  showQuickJumper: true,
                  onChange: handlePageChange,
                  'onUpdate:current': current => (tableQuery.pageNum = current),
                  'onUpdate:pageSize': pageSize => (tableQuery.pageSize = pageSize)
                }}
              >
                {{
                  bodyCell: ({ column, record }) => getColumns(column, record)
                }}
              </Table>
            </Card>
          </>
        )}
        {pageType !== BusinessPageTypeEnum.TABLE && (
          <DataDetail
            code={selectData.code}
            businessType={pageType}
            onCancelModal={onCancelModal}
            onConfirmModal={onConfirmModal}
          />
        )}
      </>
    )
  }
})
export default Shop
